import Ledger from '../index'
import './index.less'
import { Form, DatePicker, Table, Select, Typography } from 'antd';
import { ColumnsType } from 'antd/es/table';
import { useEffect, useState } from 'react';
import { getSubject } from '../../../../services/statement/index'
const { Text } = Typography;
interface DataType {
    key: string;
    subId: number,
    subNoName: string,
    annualAmountCredit: number,
    annualAmountDebit: number,
    balanceDirection: number,
    currentAmountCredit: number,
    currentAmountDebit: number,
    finalBalance: number,
    initialBalanceCredit: number,
    initialBalanceDebit: number
}
const columns: ColumnsType<DataType> = [
    {
        title: '科目名称',
        dataIndex: 'subNoName',
        key: 'subNoName',
        width: 100,
        fixed: 'left',
        align: 'center',
        render: (text) => {
            return (
                <div>
                    <a>{text}</a>
                </div>
            )
        },
    },
    {
        title: '期初余额',
        children: [
            {
                title: '借方',
                dataIndex: 'initialBalanceDebit',
                key: 'initialBalanceDebit',
                width: 100,
                align: 'center',
            },
            {
                title: '贷方',
                dataIndex: 'initialBalanceCredit',
                key: 'initialBalanceCredit',
                width: 100,
                align: 'center'

            },
        ],
    },
    {
        title: '本期发生额',
        children: [
            {
                title: '借方',
                dataIndex: 'currentAmountDebit',
                key: 'currentAmountDebit',
                width: 100,
                align: 'center'
            },
            {
                title: '贷方',
                dataIndex: 'currentAmountDebit',
                key: 'currentAmountDebit',
                width: 100,
                align: 'center'
            },
        ],
    },
    {
        title: '本连累计发生额',
        children: [
            {
                title: '借方',
                dataIndex: 'annualAmountDebit',
                key: 'annualAmountDebit',
                width: 100,
                align: 'center'
            },
            {
                title: '贷方',
                dataIndex: 'annualAmountCredit',
                key: 'annualAmountCredit',
                width: 100,
                align: 'center'
            },
        ],
    },
    {
        title: '期末余额',
        children: [
            {
                title: '借方',
                dataIndex: 'finalBalance',
                key: 'finalBalance',
                width: 100,
                align: 'center',
                render: (text, record) => {
                    if (record.balanceDirection == 1) {
                        return (
                            <div>
                                <span>{text}</span>
                            </div>
                        )
                    } else {
                        return null
                    }
                }
            },
            {
                title: '贷方',
                dataIndex: 'finalBalance',
                key: 'finalBalance',
                width: 100,
                align: 'center',
                render: (text, record) => {
                    if (record.balanceDirection == 2) {
                        return (
                            <div>
                                <span>{text}</span>
                            </div>
                        )
                    } else {
                        return null
                    }
                }
            },
        ],
    },
];
function Subbalance() {
    //分页
    const [total, setTotal] = useState(0);
    let page= 1;
    let count = 5;
    const pageChange = (v: any) => {
        page=v;
        Subrender();
    }
    //表格数据渲染页面
    const [data, setData] = useState([]);
    useEffect(() => {
        Subrender();
    }, [])
    const Subrender = () => {
        getSubject({
            endDate: "2023-10-13T01:59:18.193Z",
            endSubId: 0,
            pageNo: page,
            pageSize: count,
            startDate: "2023-10-13T01:59:18.193Z",
            startSubId: 0
        }).then((res) => {
            console.log(res);
            let _data = res.data.list.map((v: any) => {
                return { ...v, key: v.subId }
            })
            setData(_data);
            setTotal(res.data.total);
        })

    }

    const [selectedValue, setSelectedValue] = useState('male');
    const { Option } = Select;

    const { RangePicker } = DatePicker;
    const onFinish = (values: any) => {
    };
    return (
        <div className='finall'>
            <Ledger header='财务总账'></Ledger>
            <div className='center'>
                <Form
                    name="customized_form_controls"
                    layout="inline"
                    onFinish={onFinish}
                >
                    <Form.Item
                        label="记账时间："
                        name="date"
                        style={{ marginLeft: '60px' }}
                    >
                        <RangePicker style={{ maxWidth: 215 }} />
                    </Form.Item>
                    <Form.Item
                        label="科目："
                        name="subone"
                    >
                        <Select
                            placeholder="科目筛选"
                            allowClear
                            style={{ width: 140 }}
                        >
                            <Option value="male">male</Option>
                            <Option value="female">female</Option>
                            <Option value="other">other</Option>
                        </Select>
                    </Form.Item>
                    <Form.Item
                        label="至"
                        name="subtwo"
                    >
                        <Select
                            placeholder="科目筛选"
                            allowClear
                            style={{ width: 140 }}
                        >
                            <Option value="male">male</Option>
                            <Option value="female">female</Option>
                            <Option value="other">other</Option>
                        </Select>
                    </Form.Item>
                    <button style={{ width: '60px', height: '35px', border: 'none', background: '#22AB82', color: 'white' }} onClick={onFinish}>搜素</button>
                </Form>
                <Form>
                    <button style={{ width: '60px', height: '35px', marginRight: 20, border: 'none', background: '#22AB82', color: 'white' }}>导出</button>
                    <button style={{ width: '60px', height: '35px', border: 'none', background: '#22AB82', color: 'white' }}>打印</button>
                </Form>
            </div>
            <Table columns={columns} dataSource={data} bordered style={{ marginLeft: '60px' }}
                pagination={{ defaultPageSize: 5, total: total, onChange: pageChange }}
                summary={(data) => {
                    let initDebit = 0;
                    let initCredit = 0;
                    let currentAmountDebit = 0;
                    let currentAmountCredit = 0;
                    let annualAmountDebit = 0;
                    let annualAmountCredit = 0;
                    let finalBalance = 0;
                    let finalBalance2 = 0;
                    data.map((v, i) => {
                        initCredit += v.initialBalanceCredit
                        initDebit += v.initialBalanceDebit
                        currentAmountDebit += v.currentAmountDebit
                        currentAmountCredit += v.currentAmountCredit;
                        annualAmountDebit += v.annualAmountDebit;
                        annualAmountCredit += v.annualAmountCredit;
                        if (v.balanceDirection == 1) {
                            finalBalance += v.finalBalance;
                        }
                        if (v.balanceDirection == 2) {
                            finalBalance2 += v.finalBalance;
                        }
                    })
                    return (<>
                        <Table.Summary.Row style={{ textAlign: 'center' }}>
                            <Table.Summary.Cell colSpan={1} index={0} className="total-cell">总计:</Table.Summary.Cell>
                            <Table.Summary.Cell index={1} colSpan={1} >
                                <Text >{initDebit}</Text>
                            </Table.Summary.Cell>
                            <Table.Summary.Cell colSpan={1} index={1} >
                                <Text>{initCredit}</Text>
                            </Table.Summary.Cell>
                            <Table.Summary.Cell colSpan={1} index={1}>
                                <Text>{currentAmountDebit}</Text>
                            </Table.Summary.Cell>
                            <Table.Summary.Cell colSpan={1} index={1}>
                                <Text>{currentAmountCredit}</Text>
                            </Table.Summary.Cell>
                            <Table.Summary.Cell colSpan={1} index={1}>
                                <Text>{annualAmountDebit}</Text>
                            </Table.Summary.Cell>
                            <Table.Summary.Cell colSpan={1} index={1}>
                                <Text>{annualAmountCredit}</Text>
                            </Table.Summary.Cell>
                            <Table.Summary.Cell colSpan={1} index={1}>
                                <Text>{finalBalance}</Text>
                            </Table.Summary.Cell>
                            <Table.Summary.Cell colSpan={1} index={1}>
                                <Text>{finalBalance2}</Text>
                            </Table.Summary.Cell>
                        </Table.Summary.Row>
                    </>

                    )
                }}
            />
            <span className='footer'>当前合计，共3条记录</span>
            <div>
                <div className='addfooter'>@2014-2023 财务出纳管理系统</div>
            </div>
        </div>
    )
}
export default Subbalance